<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">           


<ui:composition template="/resources/jsf/component/include/default.xhtml">
    
    <ui:define name="head">
        <ui:include src="/resources/jsf/component/composition/system/css/default.xhtml" />
        <ui:include src="/resources/jsf/component/composition/system/javascript/default.xhtml" />
        <ui:include src="/resources/jsf/component/composition/system/javascript/jquery-mask.xhtml" />
    </ui:define>
    
    <ui:define name="left-content">
    </ui:define>

    <ui:define name="content">
        <h2>
            Cadastre-se
        </h2>
        <h:form id="form_user">
            <h:panelGrid columns="3">
                <h:outputLabel for="name" value="Nome:" />
                <h:inputText id="name" value="#{userc.personb.person.name}">
                    <f:ajax event="blur" listener="#{uv.name}" render="m_name" />
                </h:inputText>
                <rich:message id="m_name" for="name" ajaxRendered="false" />

                <h:outputLabel for="surname" value="Sobrenome:" />
                <h:inputText id="surname" value="#{userc.personb.person.surname}">
                    <f:ajax event="blur" listener="#{uv.surName}" render="m_surname" />
                </h:inputText>
                <rich:message id="m_surname" for="surname" ajaxRendered="false" />

                <h:outputLabel for="email" value="E-mail:" />
                <h:inputText id="email" value="#{userc.userb.user.email}">
                    <f:ajax event="blur" listener="#{uv.email}" render="m_email" />
                </h:inputText>
                <rich:message id="m_email" for="email" ajaxRendered="false" />

                <h:outputLabel for="password" value="Senha" />
                <h:inputSecret id="password" value="#{userc.userb.user.password}">
                    <f:validator validatorId="confirmPasswordValidator" />
                    <f:attribute name="confirm" value="#{confirmPassword.submittedValue}" />
                    <f:ajax event="blur" execute="password confirm" render="m_password" />
                </h:inputSecret>
                <rich:message id="m_password" for="password" />

                <h:outputLabel for="confirm" value="Senha (novamente):" />
                <h:inputSecret id="confirm" binding="#{confirmPassword}">
                    <f:ajax event="blur" execute="password confirm" render="m_password m_confirm" />
                </h:inputSecret>
                <rich:message id="m_confirm" for="confirm" />

                <h:outputLabel for="gender" value="Eu sou:" />
                <h:selectOneMenu id="gender" value="#{userc.personb.person.gender}">
                    <f:selectItem itemLabel="Selecione seu gênero" />
                    <f:selectItem itemValue="M" itemLabel="Masculino" />
                    <f:selectItem itemValue="F" itemLabel="Feminino" />
                    <f:ajax event="blur" listener="#{uv.gender}" render="m_gender" />
                </h:selectOneMenu>
                <rich:message id="m_gender" for="gender" />

                <h:outputLabel for="birthdate" value="Data nascimento :" />
                <h:inputText id="birthdate" value="#{userc.personb.person.birthdate}" styleClass="date" converterMessage="dia/mês/ano">
                    <f:convertDateTime pattern="dd/MM/yyyy" />
                    <f:ajax event="blur" listener="#{uv.birthDate}" render="m_birthdate" />
                </h:inputText>
                <rich:message id="m_birthdate" for="birthdate" />

                <h:commandButton value="Cadastrar" action="#{userc.registerPerson}">
                    <f:ajax execute="@form" render="@form" />
                </h:commandButton>

                <a4j:status>
                    <f:facet name="start">
                        <h:graphicImage name="loader.gif" library="image" />
                    </f:facet>
                </a4j:status>
            </h:panelGrid>

            <ui:include src="/resources/jsf/component/composition/system/popup.xhtml" />

        </h:form>
    </ui:define> 
        
    <ui:define name="right-content" />

</ui:composition>
</html>